<template>
  <div class="login-box">
    <div class="loginForm">
      <h2 class="title">电商后台管理系统</h2>
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" :prefix-icon="User" type="text" autocomplete="off" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" :prefix-icon="Lock" type="password" autocomplete="off"
            placeholder="请输入密码" />
        </el-form-item>
        <el-form-item>
          <el-button :style="{ width: '100%' }" size='large' type="primary"
            @click="submitForm(ruleFormRef)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import * as http from '@/request/http';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';

// import { useUserStore } from '@/store/userStore';

const router = useRouter();
// const userStore = useUserStore();

const ruleFormRef = ref<FormInstance>()

const validatorPassword = (_rule: any, value: any, callback: any) => {
  // console.log('验证方法:', rule, value);
  // 自定义校验规则  正则表达式
  // const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{6,20}$/
  let reg = /^[a-zA-Z0-9]{6,}$/;
  if (value === '') {
    callback(new Error('请输入密码!'))
  } else if (!reg.test(value)) {
    callback(new Error('密码格式不正确!'))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  username: 'admin',
  password: '123456',
})

const rules = reactive<FormRules<typeof ruleForm>>({
  username: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
  password: [{ validator: validatorPassword, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      // 表单校验成功
      // 发送登陆请求
      http.admin.adminLogin({
        username: ruleForm.username,
        password: ruleForm.password,
      }).then(async res => {
        if (res.code === 200) {
          // 登陆请求成功
          // 1. 提示用户 登陆成功
          ElMessage.success('登陆成功');
          // 2. localStorage本地存储 token
          localStorage.setItem('token', res.data.tokenHead + res.data.token);
          // 3. 发送请求 获取当前用户的信息
          // let res2 = await http.admin.adminInfo();
          // console.log(res2);
          // 更新数据 到 pinia
          // userStore.updateMenus(res2.data.menus);

          // 4. 跳转回到 首页
          router.push('/index');
        } else {
          // 登陆失败
          ElMessage.error(res.message);
        }

      })
    } else {
      // 表单校验不通过,无法正常提交
      console.log('表单校验不通过!')
      return false
    }
  })
}
</script>

<style scoped lang="less">
.login-box {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  position: relative;

  .loginForm {
    width: 418px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
      color: #fff;
      text-align: center;
      margin-bottom: 20px;
    }

    // 修改第三方的样式
    :deep(.el-input__wrapper) {
      background-color: #283443;
      box-shadow: 0 0 0 1px #3e4957;
      padding: 8px 16px;
    }

    :deep(.el-input__inner) {
      color: #fff;
    }
  }
}
</style>
